@include('_include.header')
<style>
    .choose_goods_list{
        padding: 20px;
    }
    .choose_goods_list .item{
        width: 100px;
        height: 130px;
        padding: 10px 10px 0 10px;
        border: 1px solid #ddd;
        cursor: pointer;
        float: left;
        margin: 10px;
        position: relative;
    }
    .choose_goods_list .item img{
        width: 100px;
        height: 100px;
    }

    .choose_goods_list .select {
        position: relative;
        text-align: center;
        line-height: 93px;
        color: #4ABE84;
        background-color: #fff;
        box-shadow:0px 2px 7px 0px rgba(85,110,97,0.35);
        border:1px solid rgba(74,190,132,1);
    }

    .choose_goods_list .select:before {
        content:'';
        position: absolute;
        right: 0;
        bottom: 0;
        border: 17px solid #4ABE84;
        border-top-color: transparent;
        border-left-color: transparent;
    }
    .choose_goods_list .select:after {
        content: '';
        width: 5px;
        height: 12px;
        position: absolute;
        right: 6px;
        bottom: 6px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
    }
    .choose_goods_list .item p{
        line-height: 30px;
        height: 30px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
    }
    .layui-flow-more{
        clear: both;
    }
    .choose_goods_list .layui-input{
        padding: 0 10px;
        width: 489px;
        margin-left: 10px;
        float:left;
    }
    .choose_goods_list .layui-btn{
        width: 60px;
    }
    .layui-form-item-choose-goods{
        display: none;
    }
    .layui-form-item-choose-goods input{
        width: 300px;
        border: none;
        color: red;
    }
    .layui-form-item-choose-goods img{
        width: 120px;
        height: 120px;
        margin: 20px 20px 20px 0;
        border: 1px solid #ddd;

    }
</style>
<body class="auth-user">
<div class="layui-fluid">
    <div class="layui-row larryms-panel auth-user-add">
        <form class="layui-form layui-form-pane" method="post">
            <div class="layui-form-item">
                <button type="button" class="layui-btn choose_goods" style="width: 120px" >选择商品</button>
            </div>

            <div class="layui-form-item layui-form-item-choose-goods" @if($model->goods_name) style="display: block" @endif>
                <img src="{{$model->goods_image}}" class="goods_image">
                <input type="text" disabled name="goods_name" placeholder="请选择商品" value="{{$model->goods_name}}" lay-verify="required" autocomplete="off" class="layui-input larry-input ">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">金额</label>
                <div class="layui-input-inline" style="width: 500px">
                    <input type="number" name="amount"   placeholder="请填写商品金额"  lay-verify="required" value="{{$model->amount}}" autocomplete="off" class="layui-input larry-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">邀请人数</label>
                <div class="layui-input-inline" style="width: 500px">
                    <input type="number" name="numbers"   placeholder="请填写邀请人数"  lay-verify="required" value="{{$model->numbers}}" autocomplete="off" class="layui-input larry-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">有效天数</label>
                <div class="layui-input-inline" style="width: 500px">
                    <input type="number" name="days"   placeholder="订单有效天数（天）"  lay-verify="required" value="{{$model->days}}" autocomplete="off" class="layui-input larry-input">
                </div>
            </div>



            <div class="layui-form-item" style="text-align: center">
                <input type="hidden" name="id" value="{{$model->id}}">
                <input type="hidden" name="goods_id" value="{{$model->goods_id}}">
                <input type="hidden" name="goods_image" value="{{$model->goods_image}}">
                <button class="layui-btn" lay-submit lay-filter="ad_add">确定</button>
            </div>

        </form>
    </div>
</div>


<div class="choose_goods_list" id="choose_goods_list" style="display: none">
    <input type="text"  class="layui-input-inline layui-input search_name" placeholder="请输入商品名称" >
    <button type="button" class="layui-btn screen_goods">筛选</button>
    <div id="flow_goods"></div>
</div>

<script>
    layui.config({
        base: "/plugin/layuiadmin/" //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'flow'], function(){
        var $ = layui.jquery,
        form = layui.form;
        var flow = layui.flow;

        function loadGoods(){
            flow.load({
                elem: '#flow_goods' //流加载容器
                // ,scrollElem: '#choose_goods_list' //滚动条所在元素，一般不用填，此处只是演示需要。
                ,done: function(page, next){ //执行下一页的回调
                    $.ajax({
                        url:"{{url('goods/goods-list')}}",
                        dateType:'json',
                        data: {
                            name: $(".search_name").val(),
                            page: page,
                            limit: 12
                        },
                        type:'get',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success:function (res) {
                            let content = "";
                            if(res.code === 0){
                                $.each(res.data, function (k, v) {
                                    content += "<div class='item' data-id='"+v.id+"' >\n" +
                                        "          <img src='"+v.images+"' alt=''/>\n" +
                                        "          <p>"+v.goods_name+"</p>\n" +
                                        "       </div>"
                                })
                            }
                            next(content, page < (res.count / 12));
                        }
                    })
                }
            });
            form.render();
        }

        var open_goods;

        $('.choose_goods').on('click', function () {
            open_goods = layer.open({
                type: 1,
                area: ['615px', '600px'],
                content: $("#choose_goods_list"),
                title: '请选择商品',
                shadeClose: false, //点击遮罩关闭
                closeBtn: 2,
                success:function () {
                    loadGoods();
                }
            });
        });


        $('.screen_goods').on('click', function () {
            // if(! $("input[name='goods_name']").val()){
            //     layer.msg('请输入筛选内容');
            //     return;
            // }
            $('#flow_goods').remove();
            $('#choose_goods_list').append("<div id='flow_goods'></div>");
            loadGoods();
        });

        $(document).on('click', '.item', function () {
            $(this).addClass('select').siblings().removeClass('select');
            var goods_id = $(this).data('id');
            var goods_name = $(this).find('p').text();
            var goods_image = $(this).find('img').attr('src');


            $("input[name='goods_id']").val(goods_id);
            $("input[name='goods_image']").val(goods_image);
            $("input[name='goods_name']").val(goods_name);
            layer.close(open_goods);

            $('.goods_image').attr('src', goods_image);

            $('.layui-form-item-choose-goods').fadeIn()

        });

        form.on('submit(ad_add)', function(data) {
            var index = layer.load(1);
            $.ajax({
                url:"{{url('plugins/share-free/edit-goods')}}",
                dateType:'json',
                data:data.field,
                type:'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function (res) {
                    layer.close(index);
                    layer.msg(res.message);
                    if(res.status == SUCCESS){
                        var iframe = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(iframe); //再执行关闭
                    }
                }
            });

            return false;
        });


    });
</script>

</body>
@include('_include.footer')